<template>
	<view class="page">
		<view class="page_con">
			<view class="slogen_item">
				<image src="@/static/img/login/login_slogen.png" mode="aspectFit"></image>
			</view>

			<view class="login_form">
				<view class="login_title">
					<image src="@/static/img/login/login_form_title.png" mode="aspectFill"></image>
				</view>
				<view class="form_con">
					<view class="list">
						<view class="item ">
							<view class="lable">
								手机号码
							</view>
							<input type='number' class="phone_item" placeholder='填写手机号码' placeholder-class='placeholder'
								v-model="mobile" />
						</view>
						<view class="item code_item">
							<view class="lable">
								验&nbsp;证&nbsp; 码
							</view>
							<view class="code_section">
								<input type='text' :maxlength="6" placeholder='填写验证码' placeholder-class='placeholder' v-model="captcha"
									class="codeIput" />
								<button class="code" :class="disabled === true ? 'on' : ''" :disabled='disabled'
									@click="code">
									{{ text }}
								</button>
							</view>
						</view>
					</view>
					<button form-type="submit" class="confirmBnt" @click="editPwd">登录</button>
				</view>
			</view>


			<view class="butt_item">
				<view class="copyright_item">
					版权所有 上海碧相信智能科技有限公司
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getsendSmsCode,
		loginByCode,
		getUserInfo
	} from '@/api/api.js'
	export default {
		data() {
			return {
				mobile: '', //手机号
				captcha: '',

				timer: '',
				text: '获取验证码',
				nums: 60,
				disabled: false
			};
		},
		onLoad() {
			// console.log(uni.getStorageSync('accessToken'))
		},
		methods: {
			getTimes() {
				this.nums = this.nums - 1;
				this.text = "剩余 " + this.nums + "s";
				if (this.nums < 0) {
					clearInterval(this.timer);
				}
				this.text = "剩余 " + this.nums + "s";
				if (this.text < "剩余 " + 0 + "s") {
					this.disabled = false;
					this.text = "重新获取";
				}
			},
			editPwd: function() {
				if (!this.mobile) {
					uni.showToast({
						icon: 'none',
						title: '请填写手机号码'
					})
				}
				if (!(/^1(3|4|5|7|8|9|6)\d{9}$/i.test(this.mobile))) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号码！'
					})
				}
				if (!this.captcha) {
					uni.showToast({
						icon: 'none',
						title: '请填写验证码'
					})
				}
				// 校验验证码是否正确
				uni.showLoading({
					title: '加载中',
					mask: true
				});


				loginByCode({
					mobile: this.mobile,
					code: this.captcha
				}).then(res => {
					uni.hideLoading();
					this.captcha = '';
					clearInterval(this.timer);
					this.disabled = false;
					this.text = "获取验证码";
					if (res.code === 0) {
						this.$store.commit("LOGIN", {
							'token': res.data.accessToken
						});
						// 存token
						uni.setStorage({
							key: 'accessToken',
							data: res.data.accessToken,
						})

						getUserInfo().then(res => {
							// 存用户信息
							uni.setStorage({
								key: 'userInfo',
								data: res.data,
							})
							uni.showToast({
								icon: 'none',
								title: "登录成功",
							})
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/home/index'
								})
							}, 500)
						})

					}

				})

			},

			/**
			 * 发送验证码
			 */
			async code() {
				if (!this.mobile) {
					uni.showToast({
						icon: 'none',
						title: "请填写手机号码！",
					})
					return
				}
				if (!(/^1(3|4|5|7|8|9|6)\d{9}$/i.test(this.mobile))) {
					uni.showToast({
						icon: 'none',
						title: "请输入正确的手机号码！",
					})
					return
				}
				// 执行验证码的发送
				this.nums = 60;
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				// scene 5用户登录，21管理员登录
				await getsendSmsCode({
					'mobile': this.mobile,
					'scene': 5
				}).then(res => {
					uni.showToast({
						icon: 'none',
						title: "验证码已发送"
					})
					this.timer = setInterval(this.getTimes, 1000);
					this.disabled = true;
					uni.hideLoading();
				}).catch(err => {
					uni.showToast({
						icon: 'none',
						title: err
					})
					uni.hideLoading();
				});
			},

			openWeb(v) {
				uni.navigateTo({
					url: v
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page_con {
		min-height: 100vh;
		min-height: 100dvh;
		background-image: url('@/static/img/login/login_back.png');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: top center;
		position: relative;

		.slogen_item {
			text-align: center;

			image {
				margin-top: 18%;
				width: 619rpx;
				height: 260rpx;
			}
		}

		.login_form {
			background-image: url('@/static/img/login/login_form_back.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			position: relative;
			text-align: center;
			margin: 100rpx 25rpx 0;
			padding: 60rpx 60rpx 90rpx;

			.login_title {
				position: absolute;
				left: 0;
				right: 0;
				top: -40rpx;

				image {
					width: 361rpx;
					height: 110rpx;
				}
			}
		}

		.butt_item {
			position: absolute;
			bottom: 4%;
			left: 0;
			right: 0;
			text-align: center;

			.copyright_item {
				color: #000;
				font-size: 28rpx;
			}
		}
	}
</style>

<style lang="scss" scoped>
	.form_con {

		.list {
			width: 100%;
			margin: 53rpx auto 0 auto;

			.item {
				text-align: left;
				margin-bottom: 40rpx;
				display: flex;
				justify-content: flex-start;

				input {
					height: 100%;
					font-size: 32rpx;
					background-color: #fff;
					height: 64rpx;
					padding: 0 20rpx;

					&.codeIput {
						width: 220rpx;
					}

				}

				.lable {
					width: 170rpx;
				}

				.placeholder {
					color: #FF999999;
				}

				.phone_item {
					width: 376rpx;
				}

				.code_section {
					display: flex;
					justify-content: space-around;

					.code {
						font-size: 24rpx;
						color: #FFFFFF;
						width: 156rpx;
						height: 64rpx;
						background: #3981FF;
						border-radius: 4rpx;

						&.on {
							color: #fff !important;
						}
					}
				}

			}
		}

	}


	.confirmBnt {
		font-size: 32rpx;
		color: #FFFFFF;
		margin: 60rpx auto 0 auto;
		text-align: center;
		line-height: 90rpx;
		width: 580rpx;
		height: 78rpx;
		line-height: 78rpx;
		background: linear-gradient(180deg, #4A8AFF, #0263FF);
		border-radius: 8rpx;
	}
</style>
